<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DataTables Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-5">
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td><button class="btn btn-primary edit-btn">Edit</button></td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">Edit Row</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="editForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="form-group">
<label for="position">Position</label>
<input type="text" class="form-control" id="position" required>
</div>
<div class="form-group">
<label for="office">Office</label>
<input type="text" class="form-control" id="office" required>
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var table = $('#example').DataTable();
var currentRow;
// Handle click on "Edit" button
$('#example tbody').on('click', '.edit-btn', function() {
currentRow = $(this).closest('tr');
var data = table.row(currentRow).data();
$('#name').val(data[0]);
$('#position').val(data[1]);
$('#office').val(data[2]);
$('#editModal').modal('show');
});
// Handle form submission
$('#editForm').on('submit', function(event) {
event.preventDefault();
var name = $('#name').val();
var position = $('#position').val();
var office = $('#office').val();
table.row(currentRow).data([name, position, office, '<button class="btn btn-primary edit-btn">Edit</button>']).draw(false);
$('#editModal').modal('hide');
});
});
</script>
</body>
</html>